<template>
  <div class="aboutUs">
    <div class="plantBox">
      <div class="plants">
        <div class="smallPlants"></div>
      </div>
    </div>
    <div class="rocket"></div>
    <div class="yunshi1"></div>
    <div class="yunshi2"></div>
    <div class="title"><span class="t-1" style="--j:0;">Grape</span> <span class="t-2" style="--j:1;">Code</span> <span
        class="t-3" style="--j:2;">Online</span> <span class="t-4" style="--j:3;">Judge</span>
    </div>
    <div class="statistics">
      <div class="stat-item">
        <span class="stat-label">判题数:</span>
        <span class="stat-value">{{ state.judgeSum }}</span>
      </div>
      <div class="stat-item">
        <span class="stat-label">用户数:</span>
        <span class="stat-value">{{ state.userSum }}</span>
      </div>
    </div>
    <div class="contain">
      &emsp;&emsp;GCOJ是一款领先的在线代码评测网站，旨在提升编程比赛的效率，并为用户提供便捷快速的比赛举办体验。其系统设计突出竞赛模块，涵盖ACM、OI、IOI、天梯等多种赛制，同时支持单人和团队参赛，满足不同用户的需求。无论是个人挑战还是团队竞争，GCOJ都致力于为用户提供最佳的竞赛体验。系统还提供：编程训练题库、讨论区、编程社区等，是一个全方位的学习和交流平台。
    </div>
    <div class="devTeam">
      <div class="d-title">开发团队</div>
      <div class="names">
        <usBtn name="陈杰" msg="后端"></usBtn>
        <usBtn name="黄俨腾" msg="前端"></usBtn>
        <usBtn name="姜凯森" msg="后端"></usBtn>
        <usBtn name="颜斌" msg="前端"></usBtn>
        <usBtn name="陆长锋" msg="后端"></usBtn>
      </div>
    </div>
    <div class="devTeam" style="margin: 0 auto;">
      <div class="d-title">指导教师</div>
      <div class="names">
        <usBtn name="吴敏敏" msg="指导教师"></usBtn>
        <usBtn name="林少宇" msg="指导教师"></usBtn>
        <usBtn name="何俊杰" msg="指导教师"></usBtn>
        <usBtn name="刘永平" msg="指导教师"></usBtn>
      </div>
    </div>
    
    <div class="steps">
      <div class="s-title">项目历程</div>
      <div class="step" v-for="(item, index) in data" :key="item.time" >
        <div class="time">{{ item.time }}</div>
        <div class="text">{{ item.text }}</div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { onMounted, reactive, ref } from 'vue'
import usBtn from "./components/usBtn.vue"
import { data } from './config'
import { getFaceData } from './api/index'
const state = ref({
  "judgeSum": "17130",
  "userSum": "373"
})
onMounted(() => {
  document.documentElement.scrollTop = 0
  getFaceData().then(res => {
    state.value = res.data.data
  })
})
</script>

<style lang="less" scoped>
.aboutUs {
  width: 100%;
  color: #333;
  position: relative;
  overflow: hidden;
  user-select: none;
  background-position: center;
  animation: aboutUsAnimete 2s linear forwards;

  .plantBox {
    position: absolute;
    left: 20%;
    top: -90vw;

    .plants {
      width: 120vw;
      height: 120vw;
      border-radius: 50%;
      border: 2px solid #fff;
      display: flex;
      animation: plantsRotate 16s linear infinite;

      &::before {
        content: "";
        width: 50px;
        height: 50px;
        background-image: url(../../../assets/images/tuxing.png);
        background-repeat: no-repeat;
        background-size: 100%;
        position: absolute;
        left: -25px;
        top: 60vw;
        transform: rotate(20deg);
      }

      &::after {
        content: "";
        width: 30px;
        height: 30px;
        background-image: url(../../../assets/images/weixing.png);
        background-repeat: no-repeat;
        background-size: 100%;
        position: absolute;
        left: 50%;
        top: 70px;
        transform: rotate(160deg);
      }

      .smallPlants {
        width: 100vw;
        height: 100vw;
        margin: auto;
        border-radius: 50%;
        border: 2px solid #fff;
        position: relative;

        &::before {
          content: "";
          width: 70px;
          height: 70px;
          background-image: url(../../../assets/images/earth.png);
          background-repeat: no-repeat;
          background-size: 100%;
          position: absolute;
          top: 50vw;
          right: -35px;
          animation: plantsRotate 8s linear infinite;
        }


        &::after {
          content: "";
          width: 30px;
          height: 30px;
          background-image: url(../../../assets/images/weixing2.png);
          background-repeat: no-repeat;
          background-size: 100%;
          position: absolute;
          left: 50%;
          bottom: 50px;
          transform: rotate(-130deg);
        }
      }
    }
  }

  .rocket {
    width: 30px;
    height: 30px;
    position: absolute;
    left: -3vw;
    background-image: url(../../../assets/images/rocket2.png);
    background-size: 100%;
    background-repeat: no-repeat;
    top: 80vh;
    animation: rocketMove 5s linear forwards;
  }

  .yunshi1 {
    width: 30px;
    height: 30px;
    position: absolute;
    background-image: url(../../../assets/images/yunshi.png);
    background-size: 100%;
    background-repeat: no-repeat;
    right: 3vw;
    top: -3vw;
    animation: yunshi1Move 3s linear forwards;
    animation-delay: 2s;

  }

  @keyframes yunshi1Move {
    0% {
      opacity: 1;
    }

    90% {
      opacity: 1;
    }

    100% {
      opacity: 0;
      right: 80vw;
      top: 50vw;
    }
  }

  .yunshi2 {
    width: 30px;
    height: 30px;
    position: absolute;
    background-image: url(../../../assets/images/yunshi.png);
    background-size: 100%;
    background-repeat: no-repeat;
    left: 60vw;
    top: -3vw;
    animation: yunshi2Move 4s linear forwards;
  }

  @keyframes yunshi2Move {
    0% {
      opacity: 1;
    }

    90% {
      opacity: 1;
    }

    100% {
      left: -20vw;
      top: 45vw;
      opacity: 0;
    }
  }

  @keyframes rocketMove {
    0% {
      left: -3vw;
      top: 80vh;
      transform: rotate(120deg);
    }

    10% {
      top: 75vh;
      left: 3vw;
    }

    20% {
      top: 70vh;
      left: 9vw;
    }

    30% {
      top: 65vh;
      left: 15vw;
    }

    40% {
      top: 60vh;
      left: 21vw;
      transform: rotate(30deg);

    }

    50% {
      top: 55vh;
      left: 22vw;
      transform: rotate(45deg);
    }

    60% {
      top: 50vh;
      left: 23vw;
      transform: rotate(25deg);
    }

    70% {
      top: 45vh;
      left: 22vw;
      transform: rotate(30deg);
    }

    90% {
      top: 10vh;
      left: 23vw;
      transform: rotate(50deg);
    }

    100% {
      top: -5vh;
      left: 24vw;
      transform: rotate(45deg);
    }
  }

  @keyframes plantsRotate {
    0% {
      transform: rotate(0deg);
    }

    100% {
      transform: rotate(360deg);
    }
  }

  .title {
    position: absolute;
    left: 50%;
    transform: translate(-50%);
    top: 35vh;
    font-size: 45px;
    font-weight: 600;
    animation: titleAnimate 1.2s ease-out forwards;
    animation-delay: 2s;

    span {
      animation: spanInto 1s ease-out;
      position: relative;
      animation-delay: calc(0.1s * var(--j));

    }

    @keyframes spanInto {
      0% {
        bottom: -50px;
        opacity: 0;
      }

      50% {
        bottom: 50px;
      }

      95% {
        bottom: -10px;
      }

      100% {
        bottom: 0;
        opacity: 1;
      }
    }
  }

  @keyframes titleAnimate {
    0% {
      opacity: 0.3;
    }

    50% {
      opacity: 0.7;
    }

    100% {
      opacity: 0;
      transform: scale(0.6);
      left: 0;
      top: 0;
    }
  }

  .contain {
    position: absolute;
    left: 50%;
    top: 35vh;
    width: 70%;
    line-height: 2;
    font-size: 18px;
    font-weight: 550;
    opacity: 0.8;
    white-space: pre-wrap;
    animation: contain 1.2s ease-out forwards;
    opacity: 0;
    transform: translate(-50%) scale(0.4);
    animation-delay: 2.5s;
  }

  @keyframes contain {
    0% {
      opacity: 0;
    }

    75% {
      transform: translate(-50%) scale(1.05);
    }

    100% {
      transform: translate(-50%) scale(1);
      opacity: 1;
    }
  }

  .devTeam {
    width: 100vw;
    margin-top: 90vh;
    display: flex;
    flex-flow: column;
    opacity: 0;
    animation: devTeamInto 2s ease-out forwards;

    .d-title {
      font-size: 22px;
      font-weight: 550;
      margin: 0 auto;
    }

    .names {
      width: 70%;
      display: flex;
      margin: 5vh auto;
      justify-content: space-around;
    }
  }

  @keyframes devTeamInto {
    0% {
      transform: scale(0.4);
      opacity: 0;
    }

    75% {
      transform: scale(1.05);
    }

    100% {
      transform: scale(1);
      opacity: 1;
    }
  }

  .steps {
    width: 100%;
    display: flex;
    flex-direction: column;
    margin: 30vh auto;

    .s-title {
      font-size: 22px;
      font-weight: 550;
      margin: 0 auto 10vh auto;
    }

    .step {
      display: flex;
      margin: 1vh 0 1vh 10%;
      color: #333;
      
      .time {
        width: 6vw;
        height: 6vw;
        line-height: 6vw;
        border-radius: 50%;
        text-align: center;
        position: relative;
      }

      .text {
        height: 6vw;
        line-height: 6vw;
        margin: 0 1vw;
        font-weight: 550;
      }
    }

  }

  .statistics {
    display: flex;
    justify-content: right;
    margin-top: 20px;
    font-size: 18px;
    font-weight: 600;
    color: #333;

    .stat-item {
      margin: 0 15px;
    }

    .stat-label {
      margin-right: 5px;
    }
  }
}

@keyframes aboutUsAnimete {
  0% {
    background-image: url(../../../assets/images/stars.png);
    background-size: 49%;
    opacity: 0;
    filter: blur(3px);
  }

  25% {
    background-image: url(../../../assets/images/stars.png);
    background-size: 49.5%;
    opacity: 0.25;
  }

  50% {
    background-image: url(../../../assets/images/stars.png);
    background-size: 50%;
    opacity: 0.5;

  }

  75% {
    background-image: url(../../../assets/images/stars.png);
    background-size: 50.5%;
    opacity: 0.75;
    filter: blur(0);
  }

  100% {
    background-image: url(../../../assets/images/stars.png);
    background-size: 50%;
    opacity: 1;
    filter: blur(0);
  }
}
</style>